<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('(逆舟博客)')"></th:block>
    <link rel="stylesheet" href="../static/editormd/css/style.css" th:href="@{/editormd/css/style.css}"/>
    <link rel="stylesheet" href="../static/editormd/css/editormd.preview.css" th:href="@{/editormd/css/editormd.preview.css}"/>
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" th:href="@{favicon.ico}"/>
    <style>
        body {
            padding: 40px;
        }

        #layout > header, .btns {
            width: auto;
        }

        #sidebar {
            width: 400px;
            height: 100%;
            position: fixed;
            top: 0;
            right: 0;
            overflow: hidden;
            background: #fff;
            z-index: 100;
            padding: 18px;
            border: 1px solid #ddd;
            border-top: none;
            border-bottom: none;
        }

        #sidebar:hover {
            overflow: auto;
        }

        #sidebar h1 {
            font-size: 16px;
        }

        #custom-toc-container {
            padding-left: 0;
        }

        #editormd-view, #editormd-view2 {
            padding-left: 0;
            padding-right: 430px;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="layout">
    <header>
        <h1>Markdown转HTML的显示处理之自定义 ToC 容器</h1>
        <p>即：非编辑情况下的HTML预览</p>
        <p>HTML Preview (markdown to html and custom ToC container)</p>
    </header>
    <div id="sidebar">
        <h1>摘要</h1>
        <div class="markdown-body editormd-preview-container" id="custom-toc-container"></div>
    </div>
    <div id="editormd-view">
        <textarea style="display:none;" name="editormd-markdown-doc"></textarea>
    </div>
    <div id="editormd-view2">
        <textarea id="append-test" style="display:none;"></textarea>
    </div>
</div>
<!-- <script src="js/zepto.min.js"></script>
<script>
    var jQuery = Zepto;  // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句
</script> -->
<script src="../static/editormd/js/jquery.min.js" th:src="@{/editormd/js/jquery.min.js}"></script>
<script src="../static/editormd/js/marked.min.js" th:src="@{/editormd/js/marked.min.js}"></script>
<script src="../static/editormd/js/prettify.min.js" th:src="@{/editormd/js/prettify.min.js}"></script>

<script src="../static/editormd/js/raphael.min.js" th:src="@{/editormd/js/raphael.min.js}"></script>
<script src="../static/editormd/js/underscore.min.js" th:src="@{/editormd/js/underscore.min.js}"></script>
<script src="../static/editormd/js/sequence-diagram.min.js" th:src="@{/editormd/js/sequence-diagram.min.js}"></script>
<script src="../static/editormd/js/flowchart.min.js" th:src="@{/editormd/js/flowchart.min.js}"></script>
<script src="../static/editormd/js/jquery.flowchart.min.js" th:src="@{/editormd/js/jquery.flowchart.min.js}"></script>

<script src="../static/editormd/editormd.js" th:src="@{/editormd/editormd.js}"></script>
<script type="text/javascript">
    $(function () {
        var editormdView, editormdView2;
         //https://gitee.com/zhangyang-java/blog/tree/master/static/01.%E9%9D%A2%E8%AF%95%E9%A2%98
        $.get("/test.md", function (markdown) {
            editormdView = editormd.markdownToHTML("editormd-view", {
                markdown: markdown,//+ "\r\n" + $("#append-test").text(),
                //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                htmlDecode: "style,script,iframe",  // you can filter tags decode
                //toc             : false,
                tocm: true,    // Using [TOCM]
                tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
                //gfm             : false,
                //tocDropdown     : true,
                // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                emoji: true,
                taskList: true,
                tex: true,  // 默认不解析
                flowChart: true,  // 默认不解析
                sequenceDiagram: true,  // 默认不解析
            });
        });
        editormdView2 = editormd.markdownToHTML("editormd-view2", {
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
        });
    });
</script>
</body>
</html>